<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录你的 Microsoft账号</title>
    <link rel="shortcut icon" href="../ico/favicon.ico" />
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <link rel="stylesheet" href="../fonts/fonts2/iconfont.css">
    <link rel="stylesheet" href="../css/login.css">

</head>

<body>

    <div class="bg">
        <div class="page">
            <div class="login">
                <div class="logo">
                    <img src="../img/RE1Mu3b.png" alt="">
                </div>
                <ul>
                    <li>登录</li>
                    <li><input type="text" placeholder="输入您的电子邮件、电话或 Skype。"></li>
                    <li><span>没有帐户?</span><a href="register.html">创建一个!</a></li>
                    <li class="wenhao"><a href="javascript:;">使用安全密钥登录</a><img src="../icon/wenhao.svg" alt=""></li>
                </ul>
                <div class="next">
                    <span>下一步</span>
                </div>
            </div>
            <div class="login_option">
                <img src="../icon/key.svg" alt="">
                <span>登录选项</span>
            </div>
        </div>
        <div class="tips">
            <div class="content">
                <h2><img src="../icon/keylogin.svg" alt=""> 使用安全密钥登录</h2>
                <p>使用安全密钥进行登录，而不使用用户名或密码。</p>
                <p>若要使用此选项，先前必须在帐户上对此进行过设置。<a>了解如何对此进行设<br>置</a></p>
                <div class="close">
                    <span>关闭</span>
                </div>
            </div>
        </div>
        <div class="tips2">
            <div class="content">
                <h2><img src="../icon/git.svg" alt=""> 使用GitHub登录</h2>
                <p>若要使用此选项，必须之前就将个人 Microsoft 帐户链接到 GitHub 帐户。</p>
                <p>此选项不能用于访问工作或学校资源。</a></p>
                <div class="close">
                    <span>关闭</span>
                </div>
            </div>
        </div>
        <div class="page2 show">
            <div class="login2">
                <div class="logo"><img src="../img/RE1Mu3b.png" alt=""></div>
                <ul>
                    <li>登录选项</li>
                    <li>
                        <div class="list">
                            <div class="list_one">
                                <div class="img"><img src="../icon/keylogin.svg" alt=""></div>
                                <div class="text">
                                    <p>使用安全密钥登录</p>
                                    <p>只有在已为帐户启用安全密钥的情况下，才选择此选项。</p>
                                </div>
                            </div>
                            <div class="img"> <img src="../icon/wenhao.svg" alt=""></div>
                        </div>
                    </li>
                    <li>
                        <div class="list">
                            <div class="list_one">
                                <div class="img"><img src="../icon/git.svg" alt=""></div>
                                <div class="text">
                                    <p>使用 GitHub 登录</p>
                                    <p>仅个人账户</p>
                                </div>
                            </div>
                            <div class="img"> <img src="../icon/wenhao.svg" alt=""></div>
                        </div>
                    </li>
                    <li>
                        <div class="list">
                            <div class="list_one">
                                <div class="img"><img src="../icon/wangji.svg" alt=""></div>
                                <div class="text">
                                    <p>忘记了我的用户名</p>
                                    <p>仅个人账户</p>
                                </div>
                            </div>

                        </div>
                    </li>
                </ul>
                <div class="lastOne">
                    <span>上一步</span>
                </div>
            </div>

        </div>


    </div>

    <!-- 引入js -->
    <script src="../js/login.js"></script>
</body>

</html>